<template>
	<view>
		<view style="padding-top: 10px;width: 92%;margin: auto;">
		    <view class="invest-box">
		        <view class="invest-head">
		            <view class="gname">{{gName}}</view>
		            <view class="tips">产品股东可享受该品牌的分红,可获得<i id="beishu" style="color: red">100</i>%回报</view>
		            <view style="color: #e30001;" class="fenhong-box">+<span class="fenhong">{{money}}</span>元</view>
		        </view>
		        <view class="invest-body">
		            <view class="invest-item">
		                <view class="max">{{max}}</view>
		                <view class="info">入股最高</view>
		            </view>
		            <view class="invest-item">
		                <view class="min">{{min}}</view>
		                <view class="info">入股最低</view>
		            </view>
		            <view class="invest-item">
		                <view class="count">{{count}}</view>
		                <view class="info">现有股东</view>
		            </view>
		            <view class="invest-item">
		                <view class="rest">{{restFee}}</view>
		                <view class="info">剩余股金</view>
		            </view>
		        </view>
		        <view class="invest-foot">
		            <view class="touzi">
		                <view style="font-size: 17px;width: 200rpx;line-height: 40px;">投资金额: </view>
						<view class="wrap">
							<slider :value="min" @change="sliderChange" :min="min" :max="restFee" show-value />
						</view>
		            </view>
		            <view class="confirm-box" @click="rugu()" id="rugu">确定入股</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gid:'',		//商品ID
				value: 1,	//滑动的投资金额
				gName:'',	//商品名称
				min:'',		//最低入股
				max:'',		//最高入股
				count:'',	//现有股东数量
				restFee:'', //剩余股金
				money:0,	//剩余可收入金额
				logo:'',	//商品图片
				logined:true,//用户是否登录
			}
		},
		onLoad(opt) {
			this.gid = opt.gid
			this.getGoodsRuguInfo()
		},
		methods: {
			getGoodsRuguInfo(){
				//产品入股信息
				this.$http.get('/ppgoods/getGoodsById',{
					gid: this.gid
				}).then(res => {
					if(res.data.code==200){
						this.gName = res.data.data.gname;
						this.min = res.data.data.gudongMinFee;
						this.max = res.data.data.gudongMaxFee;
						this.count = res.data.data.gudongCurrentCount;
						this.logo = res.data.data.gimages;
						this.restFee = res.data.data.restFee;
					}
				})
				//如果已入股，查询股东剩余可获取的收益金额
				this.$http.get('/goodshare/getppgoodsshare',{
					gid: this.gid,
					userid:uni.getStorageSync('usersId')
				}).then(res => {
					if(res.data.code==200){
						if(!this.isNull(res.data.data.money_gain)){
							this.money = res.data.data.getMoney - res.data.data.money_gain;
						}
					}
				})
			},
			//得滑动选择器数据
			sliderChange(e) {
				this.value = e.detail.value
			},
			//确认入股
			rugu(){
				this.logined = uni.getStorageSync('logined');
				if(!this.logined){
					this.$u.toast("请先登录")
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}else{
					if(this.value > this.restFee){
						this.$u.toast("剩余股金不足，请重新选择")
						return
					}
					if(this.min > this.restFee){
						this.$u.toast("股金不足")
						return
					}
					if(this.value < this.min){
						this.$u.toast("投资金额不能小于最低入股金额")
						return
					}
					if(this.value > this.max){
						this.$u.toast("投资金额不能大于最高入股金额")
						return
					}
					this.$http.get('/goodshare/isrugu',{
						gid: this.gid,
						userid:uni.getStorageSync('usersId')
					}).then(res => {
						console.log(res.data.msg)
						if(res.data.msg=="不是品牌会员"){
							this.$u.toast("先成为品牌会员才能成为产品股东")
						}else if(res.data.msg=="已是股东"){
							this.$u.toast("您已是产品股东,不能重复入股")
						}else{
							//跳转支付界面
							uni.navigateTo({
								url:'goodsRuguPay?gid='+this.gid+'&money='+this.value+"&logo="+this.logo
							})
						}
					})
				}
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style>
	.wrap{
		width: 80%;
	}
	.touzi{
		display: flex;
		width: 100%;
		margin-top: 20px;
	}
	.goods-head img{
		width: 100px;
		height: 100px;
		border-radius: 50px;
	}
	.confirm-box{
		margin: auto;
		margin-top: 16px;
		font-size: 15px;
		text-align: center;
		padding: 6px;
		width: 90%;
		border-radius: 10px;
		color: white;
		background-color: #f70501;
	}
	.invest-box{
		padding:6px;
		background-color: white;
		border-radius: 10px;
	}
	.invest-head,.invest-body,.invest-foot{
		display: flex;
	}
	.invest-body{
		margin-top: 5rpx;
		justify-content: space-between;
	}
	.max,.min,.count,.rest{
		margin-bottom: 6px;
		color: #e40000;
		font-size: 22px;
	}
	.fenhong{

	}
	.invest-foot{
		margin-top: 10px;
		align-items: center;
	}
	.invest-body{
		padding: 10px;
		background-color: #efefef;
		border-radius: 8px;
	}
	.invest-box .tips{
		flex: 4;
		font-size: 12px;
		color: #969696;
		/*display: flex;*/
		align-items: center;
	}
	.invest-box .invest-item{
		text-align: center;
	}
	.invest-head .gname{
		flex: 2;
		display: flex;
		align-items: center;
		font-size: 17px;
	}
	.invest-head .fenhong-box{
		flex: 2;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 15px;
	}
	.invest-item .info{
		font-size: 14px;
	}
	#money{
		display: inline-block;
	}
	.invest-foot{
		display: block;
		margin-top: 0px;
		padding-top: 0px;
	}
</style>
